<template>
  <div class="article-option">
    <div class="summary">
      <span class="desc">文章概述:</span>
      <el-input
        class="article-desc"
        required
        minlength="4"
        maxlength="128"
        show-word-limit
        type="textarea"
        v-model="form.summary"
      />
    </div>
    <div class="firstPic">
      <span class="desc">文章小图:</span>
      <el-upload
        :action="reqUrl"
        :headers="{ token: getToken() }"
        :limit="1"
        :show-file-list="false"
        :on-remove="() => (form.thumbnail = '')"
        :on-success="handleAvatarSuccess"
        name="fileBlob"
      >
        <img v-if="form.thumbnail" :src="form.thumbnail" class="upload-img" />
        <app-icon v-else class="upload-icon" size="42" icon="el-icon-plus" />
      </el-upload>
    </div>
    <div class="type" v-if="form.type">
      <div class="mb-2 flex items-center text-sm">
        <span class="desc">文章类型:</span>
        <el-radio-group v-model="form.type" class="ml-4">
          <el-radio label="0" size="large">原创</el-radio>
          <el-radio label="1" size="large">转载</el-radio>
        </el-radio-group>
      </div>
    </div>
    <div class="hidden" v-if="form.hidden">
      <div class="mb-2 flex items-center text-sm">
        <span class="desc">是否隐藏:</span>
        <el-radio-group v-model="form.hidden" class="ml-4">
          <el-radio label="0" size="large">是</el-radio>
          <el-radio label="1" size="large">否</el-radio>
        </el-radio-group>
      </div>
    </div>
    <div class="comment" v-if="form.comment">
      <div class="mb-2 flex items-center text-sm">
        <span class="desc">开启评论:</span>
        <el-radio-group v-model="form.comment" class="ml-4">
          <el-radio label="0" size="large">是</el-radio>
          <el-radio label="1" size="large">否</el-radio>
        </el-radio-group>
      </div>
    </div>
    <div class="tags">
      <span class="desc">文章标签:</span>
      <div class="tags-wrapper">
        <el-tag
          v-for="tag in dynamicTags"
          :key="tag"
          closable
          :disable-transitions="false"
          @close="handleClose(tag)"
        >
          {{ tag }}
        </el-tag>
        <el-input
          v-if="inputVisible"
          ref="InputRef"
          v-model="inputValue"
          size="small"
          @keyup.enter="handleInputConfirm"
          @blur="handleInputConfirm"
        />
        <el-button
          v-else
          class="button-new-tag"
          size="small"
          @click="showInput"
        >
          + 新标签
        </el-button>
      </div>
    </div>
    <div class="checkbox">
      <el-checkbox
        v-model="form.acAgreement"
        label="我已阅读并接受《网络社区规范》"
      />
      <el-checkbox
        v-model="form.acAgreement"
        label="我已阅读并接受《内容创造保护》"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { nextTick, ref } from 'vue'
import { BASEURL } from '/src/utils/request'
import { getToken } from '/src/utils/storage'

const props = defineProps({
  form: { type: Object, required: true },
  success: { type: Function, required: true },
  reqUrl: {
    type: String,
    default:
      BASEURL +
      '/plugins/baliServer-module-blog/api/blog/article/file/img/upload',
  },
})

const inputValue = ref('')
const dynamicTags = ref([])
const inputVisible = ref(false)
const InputRef = ref(null)

const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
  console.log(response)

  let str = '' + response.result
  console.log(str)
  let index = str.indexOf('&f=') // 查找 "world" 出现的位置
  console.log(index)
  if (index !== -1) {
    let result = str.slice(index + '&f='.length) // 从 "world" 之后截取字符串
    props.form.thumbnail =
      BASEURL +
      '/plugins/baliServer-module-netdisk/api/netdisk/image/80/80/80/' +
      result
    console.log(props.form.thumbnail)
  }
}

const handleClose = (tag) => {
  dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1)
}

const showInput = () => {
  inputVisible.value = true
  nextTick(() => InputRef.value.input.focus())
}

const handleInputConfirm = () => {
  if (inputValue.value) {
    dynamicTags.value.push(inputValue.value)
    props.form.uploadTags = dynamicTags.value
  }
  inputVisible.value = false
  inputValue.value = ''
}
</script>

<style lang="scss" scoped>
.article-option {
  padding: 16px 0 16px 32px;

  .desc {
    display: inline-block;
    width: 80px;
    margin-right:10px;
  }

  & > .summary {
    display: flex;
    align-items: flex-start;
  }

  & > .firstPic {
    display: flex;
    margin: 12px 0;

    .upload-img {
      height: 120px;
      object-fit: contain;
    }

    .upload-icon {
      margin: 12px 21px;
    }
  }

  & > .difficulty {
    .el-radio-group {
      margin-left: 16px;
    }

    .el-tag {
      border: none;
    }
  }

  & > .tags {
    .tags-wrapper {
      display: inline-flex;

      & > * {
        margin: 6px 0 6px;
      }
    }
  }

  & > .checkbox {
    display: flex;
    flex-direction: column;
  }
}

.article-desc {
  width: 100%;
  max-width: 768px;
  margin: 0;
}
</style>
